import $ from "jquery";
import styles from "./index.module.less";
import videoUrl from "@/assets/movie.mp4";
import audioUrl from "@/assets/music.mp3";

function init() {
  const containerEl = $("<div>").addClass(styles.container).appendTo("#app");

  const vdoEl = $("<video>")
    .prop("src", videoUrl)
    .prop("loop", true)
    .prop("autoplay", true)
    .addClass(styles.video)
    .appendTo(containerEl);

  const adoEl = $("<audio>")
    .prop("src", audioUrl)
    .prop("loop", true)
    .prop("autoplay", true)
    .addClass(styles.video)
    .appendTo(containerEl);

  $("<h1>").text("豆瓣电影").addClass(styles.title).appendTo(containerEl);

  $(window).on("scroll", () => {
    const scrollTop = document.documentElement.scrollTop;
    const vHeight = document.documentElement.clientHeight;
    if (scrollTop >= vHeight) {
      vdoEl[0].pause();
      adoEl[0].pause();
    } else {
      vdoEl[0].play();
      adoEl[0].play();
    }
  });
}

init();
